<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg" href="src/assets/images/coin/WKC.svg" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0,,maximum-scale=1.0, user-scalable=no"
    />
    <title><%= VITE_GLOB_APP_TITLE %></title>
  </head>
  <body>
    <div id="app">
      <style>
        #app,
        body {
          margin: 0;
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #1f213c;
        }

        .loader {
          width: 20em;
          height: 20em;
          font-size: 10px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .loader .face {
          position: absolute;
          border-radius: 50%;
          border-style: solid;
          animation: animate 2000ms linear infinite;
        }

        .loader .face:nth-child(1) {
          width: 100%;
          height: 100%;
          color: #1968fe;
          border-color: currentColor transparent transparent currentColor;
          border-width: 0.2em 0.2em 0em 0em;
          --deg: -45deg;
          animation-direction: normal;
        }

        .loader .face:nth-child(2) {
          width: 70%;
          height: 70%;
          color: #fe9b19;
          border-color: currentColor currentColor transparent transparent;
          border-width: 0.2em 0em 0em 0.2em;
          --deg: -135deg;
          animation-direction: reverse;
        }

        .loader .face .circle {
          position: absolute;
          width: 50%;
          height: 0.1em;
          top: 50%;
          left: 50%;
          background-color: transparent;
          transform: rotate(var(--deg));
          transform-origin: left;
        }

        .loader .face .circle::before {
          position: absolute;
          top: -0.5em;
          right: -0.5em;
          content: "";
          width: 1em;
          height: 1em;
          background-color: currentColor;
          border-radius: 50%;
          box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em,
            0 0 0 0.5em rgba(255, 255, 0, 0.1);
        }

        @keyframes animate {
          to {
            transform: rotate(1turn);
          }
        }
      </style>
      <div class="loader">
        <div class="face">
          <div class="circle"></div>
        </div>
        <div class="face">
          <div class="circle"></div>
        </div>
        <h3 style="color: #eee; text-align: center; font-size: 12px">
          loading dapp ...
        </h3>
      </div>
    </div>
    <script async src="/charting_library/charting_library.min.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
